<template>
	<xn-form-container
		:title="formData.id ? '编辑' : '增加'"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ style: { width: '100px' } }">
			<div class="title-border pl-2">基础信息</div>
			<div class="flex">
				<a-form-item label="公海名称" name="name" class="mb-4">
					<a-input
						v-model:value="formData.name"
						:disabled="formData.defaultFlag === CommonDetermineEnum.YES"
						placeholder="请输入公海名称"
						allow-clear
						style="width: 260px"
					/>
				</a-form-item>
				<a-form-item label="公海管理员：" name="adminIds" class="ml-5 mb-4">
					<a-tree-select
						v-model:value="formData.adminIds"
						style="width: 260px"
						:tree-data="orgUserTreeData"
						tree-checkable
						allow-clear
						:show-checked-strategy="SHOW_PARENT"
						placeholder="请选择公海管理员"
						tree-node-filter-prop="label"
						:fieldNames="fieldNames"
						max-tag-count="responsive"
						:dropdownMatchSelectWidth="false"
						treeNodeFilterProp="name"
						@change="onAdminChange"
					/>
				</a-form-item>
			</div>
			<a-form-item label="公海成员：" name="memberIds" class="mb-4">
				<a-tree-select
					v-model:value="formData.memberIds"
					style="width: 260px"
					:tree-data="orgUserTreeData"
					tree-checkable
					allow-clear
					:show-checked-strategy="SHOW_PARENT"
					placeholder="请选择公海成员"
					tree-node-filter-prop="label"
					:fieldNames="fieldNames"
					max-tag-count="responsive"
					:dropdownMatchSelectWidth="false"
					treeNodeFilterProp="name"
					@change="onMemberChange"
				/>
			</a-form-item>
			<a-form-item name="phoneEncryptFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4">
				手机号加密
				<a-switch
					v-model:checked="formData.phoneEncryptFlag"
					:checkedValue="CommonSwitchEnum.TRUE"
					:unCheckedValue="CommonSwitchEnum.FALSE"
				/>
			</a-form-item>
			<div class="title-border pl-2">资源分配规则</div>
			<div>
				<a-form-item name="allocateFlag" :label-col="{ style: { width: '300px' } }" class="ml-2">
					<a-radio-group v-model:value="formData.allocateFlag" :options="allocateOptions" class="ml-4" />
				</a-form-item>
			</div>
			<div class="title-border pl-2">客户保有量上限</div>
			<div>
				<a-form-item name="swapMaxFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-2">
					<a-switch
						v-model:checked="formData.swapMaxFlag"
						:checkedValue="CommonSwitchEnum.TRUE"
						:unCheckedValue="CommonSwitchEnum.FALSE"
					/>
					开启后可设置持有客户领取数量上限
				</a-form-item>
				<a-form-item
					v-if="formData.swapMaxFlag === CommonSwitchEnum.TRUE"
					name="swapMax"
					:label-col="{ style: { width: '300px' } }"
					class="ml-6 mb-4 mt-2"
				>
					<a-input-number v-model:value="formData.swapMax" allow-clear min="1" max="9999" />
					请填写1-9999的正整数
				</a-form-item>
			</div>
			<div class="title-border pl-2">单日领取上限</div>
			<div>
				<a-form-item name="dayMaxFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-2">
					<a-switch
						v-model:checked="formData.dayMaxFlag"
						:checkedValue="CommonSwitchEnum.TRUE"
						:unCheckedValue="CommonSwitchEnum.FALSE"
					/>
					开启后可设置单日领取数量上限
				</a-form-item>
				<a-form-item
					v-if="formData.dayMaxFlag === CommonSwitchEnum.TRUE"
					name="dayMax"
					:label-col="{ style: { width: '300px' } }"
					class="ml-6 mb-4 mt-2"
				>
					<a-input-number v-model:value="formData.dayMax" allow-clear min="1" max="9999" />
					请填写1-9999的正整数
				</a-form-item>
			</div>
			<!--			<div class="title-border pl-2">-->
			<!--				资源回收规则 （如需设置，请点击-->
			<!--				<router-link to="/biz/personSwapRule/index">人员掉保规则</router-link>-->
			<!--				进行操作）-->
			<!--			</div>-->
			<!--			<div>-->
			<!--				<a-form-item name="recycleOptions" :label-col="{ style: { width: '300px' } }" class="ml-3 mb-2">-->
			<!--					<a-radio-group v-model:value="formData.recycleFlag" :options="recycleOptions" :disabled="true" class="ml-4" />-->
			<!--				</a-form-item>-->
			<!--			</div>-->
			<!--			<div class="title-border pl-2">领取规则</div>-->
			<!--			<div>-->
			<!--				<a-form-item name="receiveLimitDays" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4 mt-2">-->
			<!--					<a-input-number v-model:value="formData.receiveLimitDays" allow-clear min="1" />-->
			<!--					天内不能从公海连续领取同一个客户-->
			<!--				</a-form-item>-->
			<!--			</div>-->

			<div class="title-border pl-2">资源回收规则</div>
			<div>
				<a-form-item name="recycleOptions" :label-col="{ style: { width: '300px' } }" class="ml-3 mt-2 mb-2">
					<a-radio-group
						v-model:value="formData.recycleFlag"
						:options="recycleOptions"
						class="ml-4"
						@change="onRecycleFlagChange"
					/>
				</a-form-item>
			</div>
			<template v-if="formData.recycleFlag === ResourceRecycleTypeEnum.AUTO">
				<a-form-item name="noActionFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4">
					<a-checkbox v-model:checked="formData.noActionFlag">
						<div @click.stop.prevent="">
							超过
							<a-input-number v-model:value="formData.noFollowDays" allow-clear min="0" />
							天
							<a-input-number v-model:value="formData.noFollowHours" allow-clear min="0" />
							小时
							<a-input-number v-model:value="formData.noFollowMinutes" allow-clear min="0" />
							分钟 未产生跟进/通话记录，资源回收至原公海中
						</div>
					</a-checkbox>
				</a-form-item>
				<a-form-item name="noDealFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4">
					<a-checkbox v-model:checked="formData.noDealFlag">
						<div @click.stop.prevent="">
							超过
							<a-input-number v-model:value="formData.noDealDays" allow-clear min="0" />
							天
							<a-input-number v-model:value="formData.noDealHours" allow-clear min="0" />
							小时
							<a-input-number v-model:value="formData.noDealMinutes" allow-clear min="0" />
							分钟 客户未成交，资源回收至原公海中
						</div>
					</a-checkbox>
				</a-form-item>
				<div class="title-border pl-2">跟进操作包括</div>
				<div>
					<a-form-item name="writeFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-1 mt-1">
						<a-checkbox v-model:checked="formData.writeFlag"> 写跟进 </a-checkbox>
					</a-form-item>
					<a-form-item name="callFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-1 mt-1">
						<a-checkbox v-model:checked="formData.callFlag">
							外呼
							<a-radio-group v-model:value="formData.callResult" :options="callResultOptions" class="ml-4" />
						</a-checkbox>
					</a-form-item>
					<a-form-item name="editFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-3 mt-1">
						<a-checkbox v-model:checked="formData.editFlag"> 编辑资料 </a-checkbox>
					</a-form-item>
				</div>
			</template>
			<div class="title-border pl-2">回收规则</div>
			<div>
				<a-form-item name="recycleHabitatFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4">
					公海领取的客户回收到所属公海
					<a-switch
						v-model:checked="formData.recycleHabitatFlag"
						:checkedValue="CommonSwitchEnum.TRUE"
						:unCheckedValue="CommonSwitchEnum.FALSE"
					/>
				</a-form-item>
			</div>
			<div class="title-border pl-2">领取规则</div>
			<div>
				<a-form-item name="receiveLimitDays" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4 mt-2">
					<a-input-number v-model:value="formData.receiveLimitDays" allow-clear min="1" />
					天内不能从公海连续领取同一个客户
				</a-form-item>
			</div>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="customerHighSeasForm">
	import { required } from '@/utils/formRules'
	import tool from '@/utils/tool'
	import customerHighSeasApi from '@/api/biz/crm/customerHighSeasApi'
	import {
		CommonSwitchEnum,
		CommonDetermineEnum,
		ResourceAllocationRuleEnum,
		ResourceRecycleTypeEnum,
		CallResultEnum
	} from '@/utils/enum'
	import { TreeSelect } from 'ant-design-vue'
	import personSwapRuleApi from '@/api/biz/crm/personSwapRuleApi'

	// 定义emit事件
	const emit = defineEmits({ successful: null })
	// 默认是关闭状态
	const visible = ref(false)
	const formRef = ref()
	// 表单数据，也就是默认给一些数据
	const formData = ref({
		adminIds: [],
		memberIds: [],
		phoneEncryptFlag: CommonSwitchEnum.FALSE,
		allocateFlag: ResourceAllocationRuleEnum.EMPLOYEE_AND_ADMIN,
		swapMaxFlag: CommonSwitchEnum.FALSE,
		dayMaxFlag: CommonSwitchEnum.FALSE,
		recycleFlag: ResourceRecycleTypeEnum.NO,

		noFollowDays: null,
		noFollowHours: null,
		noFollowMinutes: null,
		noDealDays: null,
		noDealHours: null,
		noDealMinutes: null,
		callResult: CallResultEnum.CALLED,
		recycleHabitatFlag: CommonSwitchEnum.FALSE,
		receiveLimitDays: null
	})
	// 定义机构元素
	const submitLoading = ref(false)

	const allocateOptions = tool.dictList('RESOURCE_ALLOCATION_RULE')
	const recycleOptions = tool.dictList('RESOURCE_RECYCLE_TYPE')
	const callResultOptions = tool.dictList('OUTBOUND_RESULT')
	callResultOptions.forEach((item) => {
		if (item.value === 'CALLED') {
			item.label = '未接听+已接听'
		}
	})
	const onRecycleFlagChange = (e) => {
		const flagStatus = formData.value.recycleFlag === ResourceRecycleTypeEnum.AUTO
		formData.value.writeFlag = flagStatus
		formData.value.callFlag = flagStatus
		formData.value.editFlag = flagStatus
	}

	const SHOW_PARENT = TreeSelect.SHOW_PARENT
	const fieldNames = {
		label: 'name',
		value: 'id'
	}
	const orgUserTreeData = ref([])
	const orgDepartTree = () => {
		personSwapRuleApi.orgSeasDepartTree().then((data) => {
			orgUserTreeData.value = data
		})
	}
	const tempAdminIds = ref([])
	const onAdminChange = (value, label, extra) => {
		tempAdminIds.value = tool.getAllBottomPersonIds(extra.allCheckedNodes)
	}
	const tempMemberIds = ref([])
	const onMemberChange = (value, label, extra) => {
		tempMemberIds.value = tool.getAllBottomPersonIds(extra.allCheckedNodes)
	}

	onMounted(() => {
		orgDepartTree()
	})

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			formData.value = Object.assign(
				{},
				{
					...record,
					adminIds: record.adminIds.split(',').map((item) => 'e_' + item),
					memberIds: record.memberIds.split(',').map((item) => 'e_' + item),

					noActionFlag: record.noActionFlag === CommonDetermineEnum.YES,
					noDealFlag: record.noDealFlag === CommonDetermineEnum.YES,
					writeFlag: record.writeFlag === CommonDetermineEnum.YES,
					callFlag: record.callFlag === CommonDetermineEnum.YES,
					editFlag: record.editFlag === CommonDetermineEnum.YES
				}
			)
			if (record.adminIds) {
				tempAdminIds.value = record.adminIds.split(',')
			}
			if (record.memberIds) {
				tempMemberIds.value = record.memberIds.split(',')
			}
		}
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
		formData.value = {
			adminIds: [],
			memberIds: [],
			phoneEncryptFlag: CommonSwitchEnum.FALSE,
			allocateFlag: ResourceAllocationRuleEnum.EMPLOYEE_AND_ADMIN,
			swapMaxFlag: CommonSwitchEnum.FALSE,
			dayMaxFlag: CommonSwitchEnum.FALSE,
			recycleFlag: ResourceRecycleTypeEnum.NO,

			noFollowDays: null,
			noFollowHours: null,
			noFollowMinutes: null,
			noDealDays: null,
			noDealHours: null,
			noDealMinutes: null,
			callResult: CallResultEnum.CALLED,
			recycleHabitatFlag: CommonSwitchEnum.FALSE,
			receiveLimitDays: null
		}
		tempAdminIds.value = []
		tempMemberIds.value = []
	}
	// 默认要校验的
	const formRules = {
		name: [required('请输入公海名称')],
		adminIds: [required('请选择公海管理员')],
		memberIds: [required('请选择公海成员')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const { adminIds, memberIds, noActionFlag, noDealFlag, writeFlag, callFlag, editFlag, ...other } = formData.value
			customerHighSeasApi
				.submitForm(
					{
						...other,
						adminIds: tempAdminIds.value.join(','),
						memberIds: tempMemberIds.value.join(','),

						noActionFlag: noActionFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO,
						noDealFlag: noDealFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO,
						writeFlag: writeFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO,
						callFlag: callFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO,
						editFlag: editFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO
					},
					formData.value.id
				)
				.then(() => {
					visible.value = false
					formRef.value.resetFields()
					tempAdminIds.value = []
					tempMemberIds.value = []
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style scoped>
	.title-border {
		border-left: 4px solid #0d84ff;
	}
</style>
